<template>
    <div class="wrap">
        <!-- <div class="upgrade-wrap" :style="{'background-image':'url('+require('@/assets/images/vip@2x.png')+')'}"
        @click="toPage('upgradeDetail')">
            <div>
                <h2>VIP会员</h2>
                <p>介绍介绍介绍介绍介绍</p>
                <van-button type="default" class="btn">升级</van-button>
            </div>
        </div>
        <div class="upgrade-wrap" :style="{'background-image':'url('+require('@/assets/images/Family@2x.png')+')'}"
        @click="toPage('upgradeDetail')">
            <div>
                <h2>家庭版本</h2>
                <p>介绍介绍介绍介绍介绍</p>
                <van-button type="default" class="btn">升级</van-button>
            </div>
        </div>
        <div class="upgrade-wrap" :style="{'background-image':'url('+require('@/assets/images/Entrepreneur@2x.png')+')'}"
        @click="toPage('upgradeDetail')">
            <div>
                <h2>创业版本</h2>
                <p>介绍介绍介绍介绍介绍</p>
                <van-button type="default" class="btn">升级</van-button>
            </div>
        </div> -->
        <div class="upgrade-wrap" 
        v-for="(item,index) in levels" :key="index"
        :style="{'background-image':'url('+
        item.img_url||bgImg(item.name)
        +')'}"
        @click="toPage(item.id)">
            <div>
                <h2>{{item.name}}</h2>
                <p>{{item.remark}}</p>
                <van-button type="default" class="btn">升级</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { levelsIndex } from '@/api/products.js';
export default {
    data() {
        return {
            levels:[],
            // bgImg:require('@/assets/images/vip@2x.png')
        }
    },
    // computed: {
    //     bgImg() {
    //         return require('@/assets/images/vip@2x.png')
    //     }
    // },
    methods: {
        bgImg(name) {
            let imgSrc = ''
            switch (name) {
                case '会员':
                    imgSrc = require('@/assets/images/vip@2x.png')
                    break;
                case '家庭套餐':
                    imgSrc = require('@/assets/images/Family@2x.png')
                    break;
                case '创业套餐':
                    imgSrc = require('@/assets/images/Entrepreneur@2x.png')
                    break;
                default:
                    imgSrc = require('@/assets/images/vip@2x.png')
                    break;
            }
            return imgSrc
        },
        toPage(id) {
            this.$router.push({path:'/upgradeDetail',query:{id:id}})
        }
    },
    mounted() {
        levelsIndex().then(res=>{
            this.levels = res
        })
    }
}
</script>
<style lang="less" scoped>

@_width:100%;
.upgrade-wrap{
    width: @_width;
    height: @_width/1.5;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-bottom: 10px;
    div{
        color: white;
        padding: 10% 0 15%;
        margin-left: 10%;
        h2{
            margin: 0;
        }
        p{
            margin-top: 10px;
            font-size: 12px;
        }
    }
    .btn{
        min-width: 60px;
        margin-top: 15px;
        height: 32px;
        line-height: 30px;
    }
}
</style>